<template>
    <div class="wrap">
  		<header-v></header-v>
  		
  		<div class="pro-content">
  		    <div class="title">
                <p>产品中心</p>
                <span>Product Center</span>
            </div>
            <div class="menu">
                <ul class="primenu" v-if="primenu">
                    <li> <router-link to="/">益智玩具</router-link> <span @click="next('none')"> > </span></li>
                    <li> <router-link to="/">交通类玩具</router-link> <span @click="next('tow')"> > </span></li>
                    <li> <router-link to="/">游艺设施</router-link> </li>
                    <li> <router-link to="/">模型玩具</router-link> <span @click="next('four')"> > </span></li>
                    <li> <router-link to="/">充气玩具</router-link> <span @click="next('five')"> > </span></li>
                    <li> <router-link to="/">毛绒玩具</router-link> <span @click="next('six')"> > </span></li>
                    <li> <router-link to="/">儿童帐篷</router-link> </li> 
                </ul>

                <ul v-if="none" class="Submenu">
                    <li class="prev" @click="prev('none')"></li>
                    <li><router-link to="/">DIY玩具</router-link></li>
                    <li><router-link to="/">婴幼儿教具</router-link></li>
                </ul>
                <ul v-if="tow" class="Submenu">
                    <li class="prev" @click="prev('tow')"></li>
                    <li><router-link to="/">玩具船</router-link></li>
                    <li><router-link to="/">玩具飞机</router-link></li>
                </ul>
                <ul v-if="four" class="Submenu">
                    <li class="prev" @click="prev('four')"></li>
                    <li><router-link to="/">车模型</router-link></li>
                    <li><router-link to="/">航游模型</router-link></li>
                </ul>
                <ul v-if="five" class="Submenu">
                    <li class="prev" @click="prev('five')"></li>
                    <li><router-link to="/">大型充气玩具</router-link></li>
                    <li><router-link to="/">充气卡通服装</router-link></li>
                </ul>
                <ul v-if="six" class="Submenu">
                    <li class="prev" @click="prev('six')"></li>
                    <li><router-link to="/">熊类</router-link></li>
                    <li><router-link to="/">熊猫类</router-link></li>
                </ul>
            </div>
            <div class="con">
                <grid :rows="2">
                    <grid-item :label="'儿童帐篷 Z003'" link="/" >
                        <img slot="icon" src="../../assets/2005112738056345_7lpg.jpg" alt="儿童帐篷 Z003" />
                    </grid-item>
                    <grid-item :label="'儿童帐篷-Z00*'" link="/" >
                        <img slot="icon" src="../../assets/productmgmtresourceservlet(12)_69oo.jpg" alt='儿童帐篷-Z00*' />
                    </grid-item>
                </grid>
                <grid :rows="2">
                    <grid-item :label="'儿童帐篷-Z012'" link="/" >
                        <img slot="icon" src="../../assets/productmgmtresourceservlet(10)_2wo8.jpg" alt="儿童帐篷-Z012" />
                    </grid-item>
                    <grid-item :label="'自控飞机'" link="/" >
                        <img slot="icon" src="../../assets/abc_jvz9.jpg" alt='自控飞机' />
                    </grid-item>
                </grid>
                <grid :rows="2">
                    <grid-item :label="'鱼形旋转升降飞机'" link="/" >
                        <img slot="icon" src="../../assets/20080308050227_51gn.jpg" alt="鱼形旋转升降飞机" />
                    </grid-item>
                    <grid-item :label="'组合滑梯'" link="/" >
                        <img slot="icon" src="../../assets/12884620_1_skaf.jpg" alt='组合滑梯' />
                    </grid-item>
                </grid>
                <div class="page">
                    <span>共 <span>56</span> 页记录 </span>
                    <router-link to="/" class="num active">1</router-link>
                    <router-link to="/" class="num">2</router-link>
                    <router-link to="/" class="num">3</router-link>
                    <router-link to="/" class="num">4</router-link>
                    <router-link to="/" class="num">5</router-link>
                    <span> ... </span>
                    <router-link to="/" class="num">10</router-link>
                    <router-link to="/" class="num">下一页</router-link>
                    <router-link to="/" class="num">末页</router-link>
                </div>
            </div>
  		</div>
  		
  		<footer-v></footer-v>
  </div>
</template>


<script>
import header from '../public/header'
import footer from '../public/footer'
import { Grid, GridItem } from 'vux'

export default {
	
  components: {
  	headerV : header,
  	footerV : footer,
    Grid,GridItem
  },
  data () {
    return {
        primenu : true,
        none : false,
        tow : false,
        four : false,
        five : false,
        six : false
    }
  },
  methods : {
    next (obj){
        if(obj == 'none'){
            this.none = true;
            this.primenu = false;
        }else if(obj == 'tow'){
            this.tow = true;
            this.primenu = false;
        }else if(obj == 'four'){
            this.four = true;
            this.primenu = false;
        }else if(obj == 'five'){
            this.five = true;    
            this.primenu = false;       
        }else if(obj == 'six'){
            this.six = true;
            this.primenu = false;
        }
    },
    prev (obj){
        if(obj == 'none'){
            this.none = false;
            this.primenu = true;
        }else if(obj == 'tow'){
            this.tow = false;
            this.primenu = true;
        }else if(obj == 'four'){
            this.four = false;
            this.primenu = true;
        }else if(obj == 'five'){
            this.five = false;    
            this.primenu = true;       
        }else if(obj == 'six'){
            this.six = false;
            this.primenu = true;
        }
    }
  }
}
</script>


<style type="text/css">
	/* Product.style */

    .pro-content .con{ background:#fff;}
    .pro-content .weui-grid__label span{color:#666; line-height:0.3rem; font-size:0.13rem;}
    .pro-content .weui-grids .weui-grid{padding:0 !important; width:47% !important;}
    .pro-content .weui-grids a:nth-of-type(1n){ margin-left:0.03rem;}
    .pro-content .weui-grids a:nth-of-type(2n){ margin-left:0.126rem;}
    .pro-content .weui-grid__icon{height:1.53rem !important; width:100% !important; margin:0 !important;}
		.pro-content .title{color:#666; padding:0.2rem 0 0.1rem; text-align:center; }
    .pro-content .title p{ background:url('../../assets/solid2.png') center center no-repeat; font-size:0.17rem;}

    .pro-content .menu{ background:#70e8a8; -webkit-box-shadow:0 2px 5px rgba(0,0,0,0.5);box-shadow:0 2px 5px rgba(0,0,0,0.5); margin-bottom:0.2rem; overflow:hidden; padding:0.15rem 0.1rem;}
    .pro-content .primenu a{color:#fff; font-size:0.15rem; line-height:0.3rem;}
    .pro-content .primenu span{ float:right; color:#fff; font-size:0.15rem; line-height:0.3rem; cursor:pointer;}
    .pro-content .Submenu a{color:#fff; font-size:0.15rem; line-height:0.3rem;}
    .pro-content .Submenu{width:100%; overflow:hidden; }
    .pro-content .Submenu .prev{ background:url(../../assets/arrow.png) no-repeat 50% 50% rgba(0,0,0,.4); background-size:0.05rem 0.1rem !important; cursor:pointer; float:left; width: 0.14rem; height:2.1rem; display:block;  margin-right:0.05rem;}
</style>
